<script setup>
import {onMounted,defineProps} from 'vue'
import * as echarts from 'echarts';

const props= defineProps({
  xData:{type:Array,default: () => [] },
  yData:{type:Array,default: () => [] }
})
onMounted(initChartDom)
function initChartDom(){

var chartDom = document.getElementById('mainLength');
var myChart = echarts.init(chartDom);
var option;
let startValue = props.xData.length - 10;
let endtValue = props.xData.length - 1;
option = {
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
   xAxis: {
      type: 'category',
      data: props.xData
   },
   dataZoom: [
      {
         type: 'slider',
         startValue: startValue,
         endValue: endtValue,
         bottom: 30,
         height: 5,
      }
   ],
   // yAxis: {
   //    type: 'value',
   //    axisLabel: {
   //    formatter: function (value) {
   //       // 将数值转换为万为单位
   //       // if (value >= 10000 || value <= -10000) {
   //       //   return (value / 10000).toFixed(0) + '万';
   //       // }
   //       return value;
   //      }
   //    }
   // },
   yAxis: {
  type: 'value',
  name: 'm³',
  axisLabel: {
    formatter: function (value) {
      // 将数值转换为万为单位
      if (Math.abs(value) >= 10000) {
        return (value / 10000).toFixed(0) + '万';
      }
      return value;
    }
  }
},
   series: [
      {
         data: props.yData,
         type: 'bar',
         itemStyle: {
         color: function(params) {
          // 设置每个柱子的颜色，params.dataIndex 是当前柱子的索引
          const colors = ['#5CB4F9']; // 自定义颜色数组
          return colors[params.dataIndex % colors.length]; // 循环使用颜色
         }
        }
      }
   ]
};
option && myChart.setOption(option);
}

</script>

<template>
   <div style="width: 325px;height: 200px;" id="mainLength">
   </div>
</template>

<style>

</style>